<template>
    <div class="quotation-container">
        <el-container>
            <el-header class="header">
                <h1>UltraLAB 工作站配置报价系统</h1>
            </el-header>

            <el-main>
                <el-steps :active="activeStep" simple>
                    <el-step title="选择配置" icon="el-icon-cpu" />
                    <el-step title="填写客户信息" icon="el-icon-user" />
                    <el-step title="生成报价单" icon="el-icon-document" />
                </el-steps>

                <div class="step-content">
                    <!-- 步骤1: 选择配置 -->
                    <Configurator v-if="activeStep === 0" @next="handleConfigComplete" />

                    <!-- 步骤2: 客户信息 -->
                    <CustomerForm v-else-if="activeStep === 1" :config-data="configData" @prev="activeStep = 0"
                        @next="handleCustomerComplete" />

                    <!-- 步骤3: 报价单 -->
                    <QuotationTable v-else-if="activeStep === 2" :config-data="configData" :customer-data="customerData"
                        @prev="activeStep = 1" @save="handleSaveQuotation" />
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import Configurator from '@/components/Configurator.vue'
import CustomerForm from '@/components/CustomerForm.vue'
import QuotationTable from '@/components/QuotationTable.vue'

const activeStep = ref(0)
const configData = ref({})
const customerData = ref({})

const handleConfigComplete = (data) => {
    configData.value = data
    activeStep.value = 1
}

const handleCustomerComplete = (data) => {
    customerData.value = data
    activeStep.value = 2
}

const handleSaveQuotation = async (quotationData) => {
    try {
        // 调用API保存报价单
        await saveQuotation(quotationData)
        ElMessage.success('报价单保存成功！')
    } catch (error) {
        ElMessage.error('保存失败：' + error.message)
    }
}
</script>

<style scoped>
.quotation-container {
    min-height: 100vh;
    background: #f5f7fa;
}

.header {
    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-content {
    margin-top: 30px;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>